<template>
  <div class="home">
    <el-row :gutter="20">
      <!-- Popular Votes Section -->
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>热门投票</span>
              <el-button class="button" text @click="$router.push('/votes')">查看全部</el-button>
            </div>
          </template>
          <div v-for="vote in popularVotes" :key="vote.id" class="vote-item">
            <h3>{{ vote.title }}</h3>
            <p>{{ vote.description }}</p>
            <el-button type="primary" @click="$router.push(`/votes/${vote.id}`)">参与投票</el-button>
          </div>
        </el-card>
      </el-col>

      <!-- Latest News Section -->
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>最新新闻</span>
              <el-button class="button" text @click="$router.push('/news')">查看全部</el-button>
            </div>
          </template>
          <div v-for="news in latestNews" :key="news.id" class="news-item">
            <h3>{{ news.title }}</h3>
            <p>{{ formatDate(news.createdAt) }}</p>
          </div>
        </el-card>
      </el-col>

      <!-- Announcements Section -->
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>系统公告</span>
              <el-button class="button" text @click="$router.push('/announcements')">查看全部</el-button>
            </div>
          </template>
          <div v-for="announcement in latestAnnouncements" :key="announcement.id" class="announcement-item">
            <h3>{{ announcement.title }}</h3>
            <p>{{ formatDate(announcement.createdAt) }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import dayjs from 'dayjs'

export default {
  name: 'Home',
  setup() {
    const store = useStore()
    const popularVotes = ref([])
    const latestNews = ref([])
    const latestAnnouncements = ref([])

    const fetchData = async () => {
      try {
        await store.dispatch('fetchVotes')
        await store.dispatch('fetchNews')
        await store.dispatch('fetchAnnouncements')
        
        popularVotes.value = store.getters.activeVotes
        latestNews.value = store.getters.latestNews
        latestAnnouncements.value = store.getters.latestAnnouncements
      } catch (error) {
        console.error('Error fetching data:', error)
      }
    }

    const formatDate = (date) => {
      return dayjs(date).format('YYYY-MM-DD HH:mm')
    }

    onMounted(() => {
      fetchData()
    })

    return {
      popularVotes,
      latestNews,
      latestAnnouncements,
      formatDate
    }
  }
}
</script>

<style scoped>
.home {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  margin-bottom: 20px;
}

.vote-item, .news-item, .announcement-item {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.vote-item:last-child, .news-item:last-child, .announcement-item:last-child {
  border-bottom: none;
}

h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
}

p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}
</style>
